﻿<div class="ui-widget-content">
    <h3>Draggable - Ordenamento</h3>
    <div id="draggables_desordenados">
        <p>
            <span>Quando você tem</span>
            <span>vários draggables</span>
            <span>que se sobrepõem,</span>
            <span>torna-se difícil</span>
            <span>mover-se os de baixo</span>
            <span>porque eles</span>
            <span>sempre ficam em baixo.</span>
        </p>
    </div>
    <div id="draggables_ordenados">
        <p>
            <span>Para resolver isso,</span>
            <span>normalmente queremos</span>
            <span>que o draggable</span>
            <span>arrastado seja</span>
            <span>colocado na frente</span>
            <span>dos outros,</span>
            <span>formando uma pilha.</span>
        </p>
    </div>
    <div>
        <p>Para fazer isso, usamos:</p>
        <p class="codigo">$(".meus_draggables").draggable({stack: ".meus_draggables"});</p>
        <p>No caso deste slide em especial, temos:</p>
        <p class="codigo">$("#draggables_ordenados p span").draggable({containment: "#draggables_ordenados", stack: "#draggables_ordenados p span"});</p>
    </div>
    <script type="text/javascript">
        inicializador.draggableStack = function() {
            $("#draggables_desordenados p span").draggable({containment: "#draggables_desordenados"});
            $("#draggables_ordenados p span").draggable({containment: "#draggables_ordenados", stack: "#draggables_ordenados p span"});
        };
    </script>
</div>